<%--
  Created by IntelliJ IDEA.
  User: 王凯璇
  Date: 2020/12/18
  Time: 22:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>不同天气下每个小时的平均租赁数量</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 1500px;height:750px;"></div>
<%--<div id="main" style="width: 600px;height:400px;"></div>--%>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    var attr = [{
        name: "casual",
        unit: "次"

    }, {
        name: "registered",
        unit: "次"
    }, {
        name: "总次数",
        unit: "次"
    }]

    option = {
        backgroundColor: '#060B1C',

        //标题
        title: [{
            text: '不同天气下每个小时的平均租赁数量',
            x: '50%',
            y: 30,
            textAlign: 'center',
            textStyle: {
                fontSize: '30',
                fontFamily:'华文彩云',
                fontWeight: '100',
                // fontStyle:'bold',
                color: '#FFF',
                textAlign: 'right',
            },
        }, ],

        tooltip: {
            trigger: 'axis',
            backgroundColor: 'none',
            padding: 4,
            formatter: function(param) {
                console.log(param);
                var resultTooltip = "<div style='background:rgba(13,5,30,.6);border:1px solid rgba(255,255,255,.2);padding:5px;border-radius:3px;'>" +
                    "<div style='text-align:center;'>" + param[0].name + "</div>" +
                    "<div style='padding-top:5px;'>";
                for (var i = 0; i < param.length; i++) {
                    resultTooltip +=
                        "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" + param[i].color.colorStops[0].color + ";'></span>" +
                        "<span style=''> " + param[i].seriesName + ": </span>" +
                        "<span style='color:" + param[i].color + "'>" + param[i].value + "</span></span><span>" + attr[i].unit + "</span></br>"

                }
                resultTooltip += "</div>";

                return resultTooltip
            }
        },
        grid: {
            left: '10%',
            top: '8%',
            right: '5%',
            bottom: '19%',
        },
        legend: {
            show: true,
            icon: 'circle',
            orient:'vertical',// 'horizontal',
            top: '5.5%',
            right: '8%',
            itemWidth: 30,
            itemHeight: 16,
            itemGap: 10,
            textStyle: {
                color: '#c9c8cd',
                fontSize:24,
                fontFamily:'Brush Script MT',
            }
        },
        xAxis: [{
            type: 'category',
            data: ['Spring','Summer','Autumn','Winter'],
            axisLabel: {
                show: true,
                fontSize: 24,
                margin:25,
                fontFamily:'Brush Script MT',
                textStyle: {
                    color: "#C9C8CD" //X轴文字颜色
                },
            },
            axisLine: {
                show: false //不显示x轴
            },
            axisTick: {
                show: false //不显示刻度
            },
            // boundaryGap: false,
            splitLine: {
                show: true,
                width: 0.08,
                lineStyle: {
                    type: "solid",
                    color: "#03202E"
                }
            },
            axisPointer: { //轴指示器
                type: 'shadow',
                z: 1,
                shadowStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(18,155,249,0)' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'rgba(18,155,249,1)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    },
                    shadowColor: 'rgba(0, 0, 0, 0.2)',
                    shadowBlur: 5
                }
            },

        }],
        yAxis: [{
            type: 'value',
            // scale: true, //坐标轴起点不限制0
            axisLabel: {
                show: true,
                margin:25,
                textStyle: {
                    fontFamily:'Brush Script MT',
                    fontSize: 20,
                    color: "#C9C8CD" //X轴文字颜色
                }
            },
            splitLine: {
                show: false,

            },
            axisTick: {
                show: false, //不显示刻度
            },
            axisLine: {
                show: false,
            },
            nameTextStyle: {
                color: "#FFFFFF"
            },
            splitArea: {
                show: false
            }
        }],
        series: [

            {
                name: 'casual',
                type: 'bar',
                barWidth: '15%',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#A35AE0'
                        }, {
                            offset: 1,
                            color: '#78f1f1'
                        }]),
                        barBorderRadius: 11,
                    }
                },
                data:  []
            },
            {
                name: 'registered',
                type: 'bar',
                barWidth: '15%',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#00CA98'//'#66FF66'
                        }, {
                            offset: 1,
                            color: '#d5eafd'
                        }]),
                        barBorderRadius: 11,
                    }

                },
                data:  []
             },
            {
                name: 'count',
                type: 'bar',
                barWidth: '15%',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#246dc4'//'#a6f3e7'
                        }, {
                            offset: 1,
                            color: '#a6e2d8'//'#c91669'
                        }]),
                        barBorderRadius: 11,
                    }
                },
                data:  []
            }

        ]
    };

    var casual = [];
    var registered = [];
    var count = [];

    $.ajax({
        url: 'avg',
        method: "post",
        datatype: "json",
        success: function(data) {
            alert(JSON.stringify(data));
            if(data) {
                for (var i=0;i<data.length;i++) {
                    casual.push(data[i]['casual']);
                }
                for (var i=0;i<data.length;i++) {
                    registered.push(data[i]['registered']);
                }

                var casual1 = casual.map(Number);
                var registered1 = registered.map(Number);
                // var count1 = [];

                for (var i=0;i<4;i++) {
                    count.push(casual1[i]+registered1[i]);
                }

            }
            myChart.setOption({
                series: [{data:registered},{data:casual},{data: count}]
            })

        },
        error: function (errMsg) {
            console.error(errMsg)
        }
    });
    myChart.setOption(option);
</script>
</body>
</html>
